<template>
  <div class="billPageListComponent" v-if="oItem">
    <div class="style1" v-if="oItem.main.style===1">
      <div class="head">列表</div>
      <ul>
        <li v-for="l in list" :key="l.id">
          <div class="left">
            <img :src="l.logo" v-if="l.logo" alt="" />
            <p>
              <span class="name">{{ l.name }}</span>
              <span class="time">{{ l.time }}</span>
            </p>
          </div>
          <div class="right">
            <span class="num">+{{ parseFloat(l.num).toFixed(2) }}</span>
            <span class="tag">{{ l.tag }}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="style2" v-if="oItem.main.style===2">
        <div class="head">列表</div>
      <ul>
        <li v-for="l in list" :key="l.id">
          <div class="left">
            <img :src="l.logo" v-if="l.logo" alt="" />
            <p>
              <span class="name">{{ l.name }}</span>
              <span class="time">{{ l.time }}</span>
            </p>
          </div>
          <div class="right">
            <span class="num">+{{ parseFloat(l.num).toFixed(2) }}</span>
            <span class="tag">{{ l.tag }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
import tb from "@/static/images/tb.png";
import jd from "@/static/images/jd.png";
import mt from "@/static/images/mt.png";
import sn from "@/static/images/sn.png";
export default {
  name: "billPageListComponent",
  data() {
    return {
      oItem: null,
      list: [
        { id: 1, logo: tb, name: "淘宝", num: 60, tag: "其他收入", time: "12-25 05:50" },
        { id: 2, logo: jd, name: "京东", num: 100, tag: "团队收入", time: "12-07 05:50" },
        { id: 3, logo: mt, name: "抖音", num: 60, tag: "其他收入", time: "12-25 05:50" },
        { id: 4, logo: sn, name: "美团", num: 100, tag: "团队收入", time: "12-07 05:50" },
      ],
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      // //console.log("进入init");
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.billPageListComponent {
  .style1 {
    display: flex;
    flex-direction: column;
    flex: 1;padding-bottom:15px;
    .head {
      display: flex;
      height: 50px;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
      /*background-color: #fff;*/
      padding-left:30px;
    }
    ul {
      display: flex;
      flex-direction: column;
      flex: 1;
      li {
        display: flex;
        flex: 1;background-color: #fff;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;padding: 10px 0;
        margin:0 15px 15px;
        box-shadow: 3px 3px 3px #eee,-3px 3px 3px #eee,3px -3px 3px #eee,-3px -3px 3px #eee;
        &:last-child{margin-bottom: 0;}
        .left {
          display: flex;
          align-items: center;
          img {
            width: 40px;
            height: 40px;
            border-radius: 100%;
            margin-right: 10px;
            margin-left:15px;
          }
          p {
            display: flex;
            flex-direction: column;padding-top:2px;
            .name {
              font-size: 16px;
              color: #333;margin-bottom: 2px;
            }
            .time {
              font-size: 12px;
              color: #999;
            }
          }
        }
        .right {
          display: flex;
          flex-direction: column;padding-right:15px;
          align-items: center;
          .num {
            font-size: 16px;
            color: #333;
            margin-bottom: 2px;
          }
          .tag {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
   .style2 {
    display: flex;
    flex-direction: column;
    flex: 1;padding-bottom:15px;
    .head {
      display: flex;
      height: 50px;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
      /*background-color: #fff;*/
      padding-left:30px;
    }
    ul {
      display: flex;
      flex-direction: column; margin:0 15px;
      flex: 1;border-radius: 10px;overflow: hidden;
      box-shadow: 3px 3px 3px #eee,-3px 3px 3px #eee,3px -3px 3px #eee,-3px -3px 3px #eee;
      li {
        display: flex;
        flex: 1;background-color: #fff;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        .left {
          display: flex;
          align-items: center;
          img {
            width: 40px;
            height: 40px;
            border-radius: 100%;
            margin-right: 10px;
            margin-left:15px;
          }
          p {
            display: flex;
            flex-direction: column;padding-top:2px;
            .name {
              font-size: 16px;
              color: #333;margin-bottom: 2px;
            }
            .time {
              font-size: 12px;
              color: #999;
            }
          }
        }
        .right {
          display: flex;
          flex-direction: column;padding-right:15px;
          align-items: center;
          .num {
            font-size: 16px;
            color: #333;
            margin-bottom: 2px;
          }
          .tag {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
}
</style>
